<script setup lang="js">
import { ref, onMounted, reactive } from 'vue'
import {
  NButton,
  NForm,
  NInput,
  NSelect,
  NRadio,
  NRadioGroup,
  NFormItem,
  NIcon,
  useMessage,
  createDiscreteApi,
  NPopconfirm,
  NAlert,
  NTable,
} from 'naive-ui'
import { setItem, getItem } from '../utils/utils'
const countSync = ref(0)

const rules = reactive({
  accountId: {
    required: true,
    message: '请选择账号',
    trigger: ['input'],
  },
  baseUrl: {
    required: true,
    message: '请输入请示地址',
    trigger: ['input'],
  },
})
let messageReactive = null

const formRef = ref(null)

const formValue = reactive({
  balance: '',
  balance7: '',
  balance30: '',
  balance90: '',
})
const tableData = ref([])

function generateRandomNumberWithTwoDecimals(min = 2000, max = 5000) {
  return (Math.random() * (max - min) + min).toFixed(2)
}

const handlerRandomAmount = () => {
  formValue.balance = generateRandomNumberWithTwoDecimals()
  saveStorageHandle()
}

const handlerRandomLast7Amount = () => {
  formValue.balance7 = (generateRandomNumberWithTwoDecimals() * 7).toFixed(2)
  saveStorageHandle()
}

const handlerRandomLast30Amount = () => {
  formValue.balance30 = (generateRandomNumberWithTwoDecimals() * 30).toFixed(2)
  saveStorageHandle()
}

const handlerRandomLast90Amount = () => {
  formValue.balance90 = (generateRandomNumberWithTwoDecimals() * 90).toFixed(2)
  saveStorageHandle()
}

const handlerRandomLast12Amount = () => {
  const transactions = generateTransactionData()
  console.log('transactions: ', transactions);
  tableData.value = transactions
  setItem('kkTableData', tableData.value)
}

const saveStorageHandle = () => {
  setItem('kkPayForm', formValue)
}

const generateTransactionData = () => {
  const transactionData = []
  const currentDate = new Date()

  for (let i = 59; i >= 0; i--) {
    const dayDate = new Date(currentDate);
    dayDate.setDate(currentDate.getDate() - i);

    const year = dayDate.getFullYear();
    const month = String(dayDate.getMonth() + 1).padStart(2, '0');
    const day = String(dayDate.getDate()).padStart(2, '0');
    const date = `${year}-${month}-${day}`;

    let amount = generateRandomNumberWithTwoDecimals(1500, 5000)
    // 生成收入数据
    const income = {
      date: `${date}`,
      name: `Sunrise Tech Ventures LLC`,
      desc: 'Bill Income',
      amount,
    }
    transactionData.unshift(income)

    // 生成支出数据
    const expense = {
      date: `${date}`,
      name: `Boolean Tech Inc.`,
      desc: 'Bill Expense',
      amount,
    }
    transactionData.unshift(expense)
  }

  return transactionData
}

onMounted(() => {
  chrome.storage.sync.get(['count'], (result) => {
    countSync.value = result.count || 0
  })

  getItem('kkPayForm').then((value) => {
    if (value) {
      formValue.balance = value.balance || 0
      formValue.balance7 = value.balance7 || 0
      formValue.balance30 = value.balance30 || 0
      formValue.balance90 = value.balance90 || 0
    }
  })

  getItem('kkTableData').then((value) => {
    if (value) {
      tableData.value = value || []
    } else {
      if (!tableData.length) {
        handlerRandomLast12Amount()
      }
    }
  })

  chrome.runtime.onMessage.addListener((request) => {
    if (request.type === 'COUNT') {
      countSync.value = request?.count ?? 0
    }
  })
})
</script>
<template>
  <main class="kk-option">
    <h3 class="kk-h3">Option..</h3>
    <n-form
      ref="formRef"
      size="small"
      :model="formValue"
      :rules="rules"
      label-width="70"
      label-placement="left"
      style="display: block !important"
    >
      <n-form-item label="余额" path="balance">
        <n-input v-model:value="formValue.balance" placeholder="余额" />
        <n-button
          style="margin-left: 4px"
          attr-type="button"
          color="#8a2be2"
          @click="handlerRandomAmount"
        >
          随机金额
        </n-button>
      </n-form-item>
      <n-form-item label="最近7天收入" path="balance">
        <n-input v-model:value="formValue.balance7" placeholder="余额" />
        <n-button
          style="margin-left: 4px"
          attr-type="button"
          color="#8a2be2"
          @click="handlerRandomLast7Amount"
        >
          随机金额
        </n-button>
      </n-form-item>
      <n-form-item label="最近30天收入" path="balance30">
        <n-input v-model:value="formValue.balance30" placeholder="余额" />
        <n-button
          style="margin-left: 4px"
          attr-type="button"
          color="#8a2be2"
          @click="handlerRandomLast30Amount"
        >
          随机金额
        </n-button>
      </n-form-item>
      <n-form-item label="最近90天收入" path="balance90">
        <n-input v-model:value="formValue.balance90" placeholder="余额" />
        <n-button
          style="margin-left: 4px"
          attr-type="button"
          color="#8a2be2"
          @click="handlerRandomLast90Amount"
        >
          随机金额
        </n-button>
      </n-form-item>

      <n-form-item label="交易记录" path="age">
        <div>
          <n-button
            style="margin-bottom: 10px"
            attr-type="button"
            color="#8a2be2"
            @click="handlerRandomLast12Amount"
          >
            随机生成最近一年
          </n-button>
          <n-table :bordered="true" :single-line="false">
            <thead>
              <tr>
                <th>日期</th>
                <th>描述</th>
                <th>姓名</th>
                <th>金额</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData" :key="index">
                <td><n-input v-model:value="item.date" placeholder="日期" /></td>
                <td><n-input v-model:value="item.desc" placeholder="描述" /></td>
                <td><n-input v-model:value="item.name" placeholder="姓名" /></td>
                <td><n-input v-model:value="item.amount" placeholder="金额" /></td>
              </tr>
            </tbody>
          </n-table>
        </div>
      </n-form-item>
      <n-form-item>
        <n-button
          style="width: 100%"
          attr-type="button"
          color="#8a2be2"
          :loading="loading"
          :disabled="disabled"
          @click="handleValidateSubmit"
        >
          保存
        </n-button>
      </n-form-item>
    </n-form>
  </main>
</template>

<style>
:root {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif;

  color-scheme: light dark;
  background-color: #242424;
}

@media (prefers-color-scheme: light) {
  :root {
    background-color: #fafafa;
  }

  a:hover {
    color: #42b983;
  }
}

body {
  min-width: 20rem;
}

main {
  text-align: center;
  padding: 1em;
  margin: 0 auto;
}

h3 {
  color: #42b983;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1.2rem;
  margin: 2rem auto;
}

a {
  font-size: 0.5rem;
  margin: 0.5rem;
  color: #cccccc;
  text-decoration: none;
}
.kk-option {
  width: 900px;
}
</style>
